<template>
  <el-dialog :model-value="addvisible" title="添加部门" width="20%" @close="cancel" append-to-body top="3vh">
    <div class="boardBox">
      <el-form ref="queryForm" class="mt20" :model="queryParams" :rules="rules">
        <el-form-item v-show="isedit === 2">
          <el-input v-model="queryParams.parent_name" placeholder="部门名称" clearable style="width: 240px" disabled />
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="queryParams.name" placeholder="部门名称" clearable style="width: 240px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button color="#01509f" type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, onMounted, nextTick } from "@/TUIKit/adapter-vue";
  import { createDepartment, Departmentedit } from "@/api/cf";
  import { ElMessage } from "element-plus";
  const props = defineProps({
    addvisible: {
      type: Boolean,
      default: false,
    },
    isedit: {
      type: Boolean,
      default: false,
    },
    parent_info: {
      type: Object,
      default: {},
    },
    edit_info: {
      type: Object,
      default: {},
    },
  });

  const rules = reactive({
    name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
  });

  const queryParams = ref({ parent_name: "", parent_id: "", name: "", id: "" });
  const emit = defineEmits<{ (event: "update:addvisible", value: boolean): void; (event: "success", value: ""): void }>();

  // 监听 localValue 的变化，通知父组件更新值
  // watch(
  //   () => props.parent_info,
  //   newValue => {
  //     if (newValue) {
  //       queryParams.value.parent_name = newValue.name;
  //       queryParams.value.parent_id = newValue.id;
  //     } else {
  //       queryParams.value.parent_name = "";
  //       queryParams.value.parent_id = "";
  //     }
  //   }
  // );

  watch(
    () => props.addvisible,
    newValue => {
      if (newValue) {

        queryParams.value.parent_name = "";
        queryParams.value.parent_id = "";
        queryParams.value.name = "";
        queryParams.value.id = "";

        nextTick(() => {
          if (props.edit_info) {
            if (props.isedit === 2) {
              queryParams.value.name = "";
              queryParams.value.id = "";
              queryParams.value.parent_id = props.edit_info.id;
              queryParams.value.parent_name = props.edit_info.name;
            } else if (props.isedit === 3) {
              queryParams.value.name = props.edit_info.name;
              queryParams.value.id = props.edit_info.id;
       
              queryParams.value.parent_id = props.edit_info.parent_id;
              queryParams.value.parent_name = props.edit_info.parent_name;
            }
          } else {
            queryParams.value.name = "";
            queryParams.value.id = "";
            queryParams.value.parent_id = "";
            queryParams.value.parent_name = "";
          }




        // if (props.parent_info) {
        //     queryParams.value.parent_name = props.parent_info.name;
        //     queryParams.value.parent_id = props.parent_info.id;
        //   } else {
        //     queryParams.value.parent_name = "";
        //     queryParams.value.parent_id = "";
        //   }



        });
      }
    }
  );
  watch(
    () => props.edit_info,
    newValue => {
      if (newValue) {
        if (props.isedit === 2) {
          queryParams.value.name = "";
          queryParams.value.id = "";
          queryParams.value.parent_id = newValue.id;
          queryParams.value.parent_name = newValue.name;
        } else if (props.isedit === 3) {
          queryParams.value.name = newValue.name;
          queryParams.value.id = newValue.id;
          console.log(queryParams.value, "queryParams.value");
          queryParams.value.parent_id = newValue.parent_id;
          queryParams.value.parent_name = newValue.parent_name;
        }
      } else {
        queryParams.value.name = "";
        queryParams.value.id = "";
        queryParams.value.parent_id = "";
        queryParams.value.parent_name = "";
      }
    },
    {
      deep: true,
    }
  );

  onMounted(() => {});

  function cancel() {
    emit("update:addvisible", false);
  }

  // 获取表单引用
  const queryForm = ref(null);

  function submitForm() {
    queryForm.value.validate(valid => {
      if (valid) {
        const data = {
          name: queryParams.value.name,
          parent_id: queryParams.value.parent_id,
          parent_name: queryParams.value.parent_name,
          id: queryParams.value.id ? queryParams.value.id : "",
        };

        // if(props.edit_info){
        //   console.log(2222,"data");
        // }else{
        //   console.log(444444,"data");
        // }
        const tmp = props.isedit === 3 ? Departmentedit : createDepartment;

        tmp(data)
          .then(res => {
            ElMessage({
              message: res.msg,
              grouping: true,
              type: "success",
            });
            emit("update:addvisible", false);
            emit("success", "");
          })
          .catch(err => {
            ElMessage({
              message: err,
              grouping: true,
              type: "error",
            });
          });
      } else {
        console.log("表单验证失败");
        return false;
      }
    });

    // 在这里处理表单提交逻辑，例如发送请求到服务器

    // 通知父组件更新 visible 为 false
    // emit("update:visible", false);
    // emit("update:visible", false);
    //
  }
</script>

<style lang="scss" scoped>
.boardBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-y: scroll;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;

  .tishi {
    font-size: 14px;
    color: #999;
    background-color: #f3f8fb;
    padding: 5px 10px;
    border-radius: 6px;
  }
}
::v-deep .el-form-item__label {
font-size: 16px !important;
}
</style>
